<template>
  <div class="setup-wrapper">
    <div class="setup-box">
      <text class="setup-title">账户设置</text>
      <uni-list>
        <uni-list-item
          title="昵称"
          :rightText="userName"
          link
          @tap="showUpdateUserInfoPopup"
        />
        <uni-list-item title="简介" link @tap="afterRead(2)"> </uni-list-item>
        <uni-list-item
          v-if="!userInfo['hasIdCard']"
          title="实名认证"
          rightText="未认证"
          link
          @tap="routeToNameAuthentication"
        />
        <uni-list-item v-else title="实名认证" rightText="已认证"  link />
        <uni-list-item title="客服" link @tap="contactInfoPopupOpen" />
      </uni-list>
    </div>
    <div class="setup-box">
      <text class="setup-title">通用设置</text>
      <uni-list>
        <uni-list-item
          :showArrow="false"
          title="Email"
          rightText="ryzl202401@163.com"
        />
        <uni-list-item title="隐私政策" link @click="goRoutePage('隐私政策')" />
        <uni-list-item title="服务协议" link @click="goRoutePage('服务协议')" />
        <uni-list-item
          title="检查更新"
          rightText="当前版本 1.2.0"
          @click="goRoutePage('检查更新')"
          link
        />
        <uni-list-item title="证照信息" link @click="goRoutePage('证照信息')" />
        <uni-list-item title="注销帐号" link @click="goRoutePage('注销帐号')" />
      </uni-list>
    </div>
  </div>
  <div class="setup-btn">
    <button
      type="primary"
      style="
        width: 100%;
        border-radius: 50rpx;
        background: linear-gradient(90deg, #01e9bd 0%, #007cde 100%);
        font-size: 31rpx;
      "
      @click="onLoginOut"
    >
      退出登录
    </button>
    <uni-popup ref="popup" type="bottom" round background-color="#ffffff">
      <view class="title-radao">{{ radioTitle }}</view>
      <input
        type="text"
        placeholder="输入你的昵称"
        style="font-size: 31rpx"
        v-model="userName"
        v-if="radioTitle == '昵称'"
      />
      <!-- <input type="text" placeholder="输入你的简介" style="font-size: 31rpx;" v-model="userName"
             v-if="radioTitle=='简介'"/> -->
      <checkRadio
        :list="radioList"
        @getCheckData="getCheckData"
        v-if="radioTitle !== '昵称' && '简介'"
      ></checkRadio>
    </uni-popup>
  </div>
  <view class="update-user-info-popup">
    <uni-popup ref="updateUserInfoPopupRef" :animation="true" type="center">
      <view class="update-user-info-popup-card">
        <view class="update-user-info-popup-card-title-text"> 修改昵称: </view>
        <uni-easyinput
          class="login"
          styleOther="width: 100%; margin-top: 20rpx; height: 80rpx;"
          :styles="styles"
          type="nickname"
          :inputBorder="false"
          v-model="userNickName"
          placeholder="请输入昵称"
          placeholderStyle="color: #ffffff;font-size: 31rpx;"
        />
        <view
          class="update-user-info-popup-card-submit-btn"
          @click="submitUpdateUserInfo"
        >
          提交
        </view>
      </view>
    </uni-popup>
    <up-popup
      :show="contactInfoPopupShow"
      @close="contactInfoPopupClose"
      :round="rpx2px(33)"
      @open="contactInfoPopupOpen"
    >
      <view class="contact-info-popup-card">
        <up-tabs
          :list="contactInfoTabs"
          :current="curContactInfoTab"
          :line-width="rpx2px(72)"
          :lineColor="'#00B588'"
          :line-height="rpx2px(9)"
          :itemStyle="contactInfoTabStyle"
          @change="handleContactInfoTabChange"
          :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
          }"
        />
        <view v-if="curContactInfoTab === 0" class="tel">
          <view class="phone">
            咨询电话：
            <text class="spec">
              {{ contactInfo.telInfo[1].filedName }}
            </text>
          </view>
          <view class="phone">
            座机电话：
            <text class="spec">
              {{ contactInfo.telInfo[0].filedName }}
            </text>
          </view>
        </view>
        <view v-if="curContactInfoTab === 1" class="wx">
          <img
            :show-menu-by-longpress="true"
            :src="contactInfo.wxInfo.resourceUrl"
            alt=""
            class="wx-img"
          />
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, nextTick, inject } from "vue";
import {customNav} from "@/utils/customNav";
import checkRadio from "./componments/checkRadio.vue";
import { onNavigationBarButtonTap, onShow } from "@dcloudio/uni-app";
import { getDescApi, getUserInfoApi } from "@/api/public";
import { updateUserInfoApi } from "@/api/user/index.js";
import UniListItem from "@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue";
import UniList from "@/uni_modules/uni-list/components/uni-list/uni-list.vue";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup";
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import { rpx2px } from "@/utils/utils";

const contactInfoPopupShow = ref(false);
const contactInfoPopupClose = () => {
  contactInfoPopupShow.value = false;
};

const contactInfoPopupOpen = () => {
  contactInfoPopupShow.value = true;
};

const curContactInfoTab = ref(0);
const contactInfoTabs = ref([
  { name: "电话联系", type: "tel" },
  { name: "微信联系", type: "wx" },
]);
const contactInfoTabStyle = {
  flex: 1,
  fontFamily: "ali-p",
  fontSize: "31rpx",
  height: "80rpx!important",
};
const handleContactInfoTabChange = (tab) => {
  curContactInfoTab.value = tab.index;
};
const contactInfo = ref({});
const getTelInfo = async () => {
  const res = await getDescApi("客服");
  const { code, data } = res;
  if (code === 200) {
    contactInfo.value.telInfo = data[0].children[1].children;
    contactInfo.value.wxInfo = data[0].children[0];
    console.log(data, "电话");
  }
};
const { proxy } = getCurrentInstance();
const checked = ref(true);
const popup = ref();
const introduction = ref("");
const describe = ref("");
const radioList = ref();
const radioTitle = ref();
const styles = ref({
  color: "#333",
  backgroundColor: "#fff",
  borderColor: "#333",
  width: "100%",
});
const userNickName = ref("");

function afterRead(data) {
  switch (data) {
    case 1:
      radioTitle.value = "昵称";
      break;
    case 2:
      radioTitle.value = "简介";
      break;
    default:
      break;
  }
  nextTick(() => {
    if (data == 2) {

      customNav(`/package_user/pages/user/user-introduction?introduction=${introduction.value}&nickname=${userName.value}`)
      return;
    }
    popup.value.open();
  });
}

function getCheckData() {}

function onLoginOut() {
  uni.clearStorageSync();
  uni.removeStorageSync("token");
  uni.reLaunch({
    url: "/package_login/pages/login/login",
  });
}

const userInfo = ref({});
const userName = ref("");
const userPhoneNumber = ref("");
const getUserInfoByApi = async () => {
  const res = await getUserInfoApi();
  const { code, data } = res;
  if (code === 200) {
    const { nickname: nickName, introductory, phoneNumber } = data || {};
    userInfo.value = data;
    userName.value = nickName || "Lisa";
    userPhoneNumber.value = phoneNumber;
    introduction.value = introductory;
    uni.setStorageSync("userPhoneNumber", phoneNumber);
    // localStorage.setItem('enterpriseId', res.data.enterpriseId)
  }
};

/**
 * 监听实名list点击
 */
const routeToNameAuthentication = () => {
  customNav("name-authentication")
};

const showUpdateUserInfoPopup = () => {
  userNickName.value = userName.value;
  proxy.$refs["updateUserInfoPopupRef"].open();
};

const submitUpdateUserInfo = async () => {
  const params = {
    nickname: userNickName.value,
  };
  const res = await updateUserInfoApi(params);
  const { code, data } = res;
  if (code === 200) {
    await uni.showToast({
      title: "修改成功",
      icon: "success",
      duration: 2000,
    });
    proxy.$refs["updateUserInfoPopupRef"].close();
    await getUserInfoByApi();
  }
};

const packageUserPath = inject("packageUserPath");
function goRoutePage(vm) {
  switch (vm) {
    case "隐私政策":
      uni.navigateTo({
        url: `${packageUserPath}/policy`,
      });
      break;
    case "服务协议":
      uni.navigateTo({
        url: `${packageUserPath}/agreement`,
      });
      break;
    case "检查更新":
      proxy.modal.msg("目前已是最新版本~");
      break;
    case "证照信息":
      uni.navigateTo({
        url: `${packageUserPath}/certificate`,
      });
      break;
    case "注销帐号":
      uni.navigateTo({
        url: `${packageUserPath}/sign-out`,
        success: (res) => {
          res.eventChannel.emit("getUserPhoneNumber", userPhoneNumber.value);
        },
      });
      break;
    default:
      break;
  }
}

onNavigationBarButtonTap(() => {});
onShow(() => {
  getUserInfoByApi();
  getTelInfo();
});
</script>

<style lang="less" scoped>
@import url(./less/setup.less);
</style>
